import Image from "next/image";

const LabelDate = [
  {
    id: "1",
    image: "/icon/star.png",
    title: "Marketing strategy generator",
    content: "A perfect marketing strategy for your product. Our best product.",
  },
  {
    id: "2",
    image: "/icon/avatar.png",
    title: "User persona generator",
    content:
      "Understand your ideal customer without running 50 interviews. 100% Free.",
  },
  {
    id: "3",
    image: "/icon/light.png",
    title: "Business ideas generator",
    content: "10 unique ideas for your first profitable business. 100% Free.",
  },
  {
    id: "4",
    image: "/icon/clounld.png",
    title: "Value proposition generator",
    content:
      "Action plan to turn your idea into a profitable business. 100% Free.",
  },
  {
    id: "5",
    image: "/icon/magnifier.png",
    title: "Marketing problem solver",
    content: "10 ideas to solve any marketing problem. 100% Free.",
  },
  {
    id: "6",
    image: "/icon/trumpet.png",
    title: "Slogan generator",
    content: "Catch your audience's attention effortlessly. 100% Free.",
  },
];

export default function Explore() {
  return (
    <div className="mt-[80px] mx-auto width-w ">
      <div className="text-center mb-[40px] text-[rgba(36,99,235,1)] text-[22px] font-[500] font-[work sans]">
        Explore the tools ↓
      </div>
      <div>
        <ul className="place-items-center w-[100%] min-w-0 grid  grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-[52px]">
          {LabelDate.map((item) => {
            return (
              <li
                key={item.id}
                className="min-w-[250px] max-w-[500px] cursor-pointer hover:bg-[#c2c0da44] border-[1px] border-[#ffffff00] hover:border-[rgba(36,99,235,1)] flex flex-col justify-between  p-[24px] rounded-[24px] shadow-[_0px_4px_86px_0px_rgba(98,98,98,0.2)]"
              >
                <div className=" w-[56px] h-[56px] rounded-[12px] bg-[#b1bfdc44] flex items-center justify-center">
                  <Image
                    src={item.image}
                    alt="icon"
                    width={34}
                    height={33.5}
                    style={{ width: "auto" }}
                  />
                </div>
                <h1 className=" my-[15px] text-[24px] font-[600] text-black leading-[1.2]">
                  {item.title}
                </h1>
                <span className="text-[16px] font-[500] text-[#626262] leading-[1.5]">
                  {item.content}
                </span>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}
